<!--
 * @Author: ChunLai
 * @Date: 2023-08-10 14:06:35
 * @LastEditTime: 2025-09-04 18:40:24
 * @Description: 投保前必告知()
 * @FilePath: \02.bldinsure\src\views\index\components\InsurePreNotice.vue
-->
<template>
  <van-popup
    v-model="showPop"
    position="bottom"
    :style="{ height: '80%' }"
    z-index="1000"
    round
    :close-on-click-overlay="false"
    @click-overlay="closePopAction"
    @click-close-icon="closePopAction"
  >
    <div class="insure_prenotice_box">
      <div class="pop-title" style="height: 30px">重要提醒</div>
      <div class="pop-main" style="height: calc(100% - 120px)">
        <van-tabs
          v-model="active"
          color="#F54040"
          title-active-color="#F54040"
          title-inactive-color="#575757"
        >
          <van-tab
            :title="notice.titleName"
            v-for="(notice, index) in tabList"
            :key="`impot_gaozhi${index}`"
          >
            <div class="cont_box">
              <div class="html_box" v-html="notice.content"></div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="check_box" style="height: 40px">
        <van-checkbox
          v-model="isCheck"
          checked-color="#ee0a24"
          icon-size="14px"
        >
          <span style="color: #121836">我已知悉，下次不再提示</span>
        </van-checkbox>
      </div>
      <div class="safe_area" @click="closePopAction">
        <van-button
          style="height: 50px; font-size: 16px"
          color="linear-gradient(to right, #FF462C, #CB1800)"
          block
        >
          我已逐项阅读并同意
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "InsurePreNotice",
  data() {
    return {
      showPop: false,
      isCheck: false,
      active: 0,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      homeMustReadList: "page/homeMustReadList",
    }),
    tabList() {
      let res = [];
      if (this.homeMustReadList.length > 0) {
        res = [...this.homeMustReadList];
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initModule() {
      if (this.tabList.length === 0) return;
      this.showPop = true;
    },
    closePopAction() {
      if (this.active != this.tabList.length - 1) {
        return ++this.active;
      }
      this.showPop = false;
      if (this.isCheck && this.proUniqueId) {
        let params = {
          productNo: this.proUniqueId,
          workNum: this.workNum,
          orderNum: this.orderNum,
        };
        this.$store.dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "insertNoticeRead",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.insure_prenotice_box {
  width: 100%;
  height: 100%;
  background-color: #f5f5f9;
  position: relative;
  .safe_area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: MiSans;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(18, 24, 54, 1);
    background-color: #fff;
  }

  .pop-main {
    width: 100%;
  }
}
.cont_box {
  height: 100%;
  padding: 5px 12px 0;

  .html_box {
    height: 100%;
    border-radius: 10px;
    padding: 10px 12px 20px 12px;
    line-height: 18px;
    background-color: #fff;
    overflow-y: auto;
    font-size: 14px;
    font-weight: 400;
    color: rgba(87, 87, 87, 1);
  }
}
.check_box {
  display: flex;
  align-items: center;
  // height: 40px;
  margin: 0 16px;
}
.insure_prenotice_box {
  /deep/.van-tabs {
    font-size: 16px;
    height: 100%;
  }
  /deep/.van-tabs__content {
    height: calc(100% - 50px);
  }
  /deep/.van-tab__pane {
    height: 100%;
  }
}
</style>
